<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav text-center my-scroll-view">
			<!-- #ifdef APP-VUE -->
			<view style="margin-top:25px ;"></view>
			<!-- #endif -->
			<view class="cu-item" v-for="(item,index) in listObj" :key="index" :class="index==TabCur?'cur text-'+theme:'text-gray'"
			 @tap="tabSelect" :data-id="index">
				{{item.title}}
			</view>
		</scroll-view>
		<view v-for="(item,index) in listObj" :key="index" v-if="index==TabCur" class="list-content">
			<!-- 我的奖品 -->
			<block v-for="(reward ,i) in item.list" :key="i" v-if="TabCur==0">
				<view class="reward-box">
					<view class="goods">
						<view class="thumb">
							<image :src="reward.lottery_data.pic" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="title">{{reward.lottery_data.name}}</view>
							<view class="time">中奖时间：{{$common.timeFormat(reward.created_at)}}
							<text v-if="reward.lottery_data.cate == 2" class="text-red">（已发放）</text>
							</view>
						</view>
					</view>
					<view class="action-box" v-if="reward.lottery_data.cate == 3">
						<text class="goods-detail" v-if="reward.order_id > 0" @tap="goPage('/pages/shop/goods?id='+reward.lottery_data.good)">商品详情</text>
						<text class="order-detail" v-if="reward.order_id > 0" @tap="goPage('/pages/shop/order/detail?id=' + reward.order_id)">订单详情</text>
						<text class="goods-detail"  v-if="reward.order_id == 0 && reward.status == 1" @click="receiveReward(reward.lottery_data.sku_id,reward.id)">领取奖品</text>
					</view>
					<view class="action-box" v-if="reward.lottery_data.cate == 1">
						<text class="goods-detail"  v-if="reward.order_id == 0" @click="kf_show(reward.lottery_data.kf_qrcode)">联系客服领取</text>
					</view>
					
				</view>
			</block>
			<!-- 参与记录 -->
			<!-- #ifdef APP-VUE -->
			<view style="margin-top:-10px ;"></view>
			<!-- #endif -->
			<view class="join-box" v-if="TabCur==1">
				<view class="top-line">
					<text>参与时间</text>
					<text>消耗次数</text>
					<text>是否中奖</text>
				</view>
				<view class="stand-line" v-for="(record ,i) in item.list" :key="i">
					<text >{{$common.timeFormat(record.created_at)}}</text>
					<text >{{record.de_integral}}次</text>
					<!-- <text>{{$common.timeFormat(reward.created_at)}}</text> -->
					<text class="isreward">{{record.is_reward==1?'中奖':'未中奖'}}</text>
				</view>
			</view>
			<view class="cu-load margin-center" :class="item.loading?'loading':'over'"></view>
		</view>

		<serviceView ref="serviceView"></serviceView>
	</view>
</template>

<script>
	import serviceView from '@/components/default/serviceView.vue'
	export default {
		components: {
			serviceView,
		},
		filters: {},
		data() {
			return {
				theme: this.$config.THEME(),
				TabCur: 0,
				formData: {
					merchant_id: 0,
					is_channel: 0,
					address_id: 0,
					buyer_message: '',
					data: {
						sku_id:0,
						num:1
					},
					olddata: {
						sku_id:0,
						num:1
					},
					shipping_type: 1,
					type: 'buy_now',
					point: 0,
					lottlog_id:0
				},
				title: '抽奖记录',
				listObj: [{
						title: '我的奖品',
						list: [
							{
								id: 1,
								type: 0, //0产品，1积分
								goods_id: 123,
								order_id: 321,
								thumb: '../../../static/logo.png',
								title: 'APPLE/苹果 iPHONE XR 苹果分期免息正品手机 iPHONE X 8P',
								create_time: 124564567,
							},
							{
								id: 2,
								type: 0, //0产品，1积分
								goods_id: 123,
								order_id: 321,
								thumb: '../../../static/logo.png',
								title: 'APPLE/苹果 iPHONE XR 苹果分期免息正品',
								create_time: 124564567,
							},
							{
								id: 3,
								type: 1, //0产品，1积分
								integral: 1000,
								thumb: '../../../static/logo.png',
								title: '商城积分1000积分',
								create_time: 124564567,
							},
							{
								id: 4,
								type: 1, //0产品，1积分
								integral: 2000,
								thumb: '../../../static/logo.png',
								title: '商城积分2000积分',
								create_time: 124564567,
							}
						],
						hasMore: true,
						loading: false,
						page: 1,
					},
					{
						title: '参与记录',
						list: [
							{
								id:1,
								integral: 100,
								isreward: 0,
								create_time: 124564567,
							},
							{
								id:2,
								integral: 100,
								isreward: 1,
								create_time: 124564567,
							},
							{
								id:3,
								integral: 200,
								isreward: 0,
								create_time: 124564567,
							}
						],
						hasMore: true,
						loading: false,
						page: 1,
					}
				],
			}
		},
		onLoad(options) {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.getList(this.TabCur)
		},
		onShow() {
			// this.$nextTick(function() {
			// 	uni.startPullDownRefresh({})
			// })
		},
		methods: {
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = e.currentTarget.dataset.id
					this.listObj[this.TabCur].list = []
					this.listObj[this.TabCur].hasMore = true
					this.listObj[this.TabCur].page = 1
					this.listObj[this.TabCur].loading = false
					this.getList(this.TabCur)
				}
			},
			kf_show(url){
				this.$refs.serviceView.img_url = url
				this.$refs.serviceView.show()
			},
			receiveReward(goods_id, id){
				if (goods_id > 0 && id > 0) {
					uni.showLoading({
						title: '正在处理...'
					})
					this.$http
						.post('points_receive_reward', {
							gettype:'address_id',
							id:id
						})
						.then((response) => {
							if (response.data.data.status != '-1' && response.data.data.address_id > 0) {
								var type = 'buy_now'
								var param = {
									sku_id: goods_id,
									num: 1
								}
								uni.navigateTo({
									url: '/pages/shop/order/settlelist'+"?type=" + type+"&points_lottlog_id="+id+"&data="+decodeURIComponent(JSON.stringify(
														param))
								})
								// this.formData.olddata.sku_id = goods_id
								// this.formData.olddata.num = 1
								// this.formData.data = JSON.stringify(this.formData.olddata)
								// this.formData.address_id = response.data.data.address_id
								// this.formData.points_lottlog_id = id
								// uni.showLoading({
								// 	title: '正在处理...'
								// })
								// this.$http
								// 	.post('order_create', this.formData)
								// 	.then((response) => {
								// 		uni.hideLoading()
								// 		var order_id = response.data.data.id
								// 		if (order_id > 0) {
								// 			var that = this
								// 			this.$common.showSuccess('领取成功', function() {
								// 				that.listObj[that.TabCur].list = []
								// 				that.listObj[that.TabCur].hasMore = true
								// 				that.listObj[that.TabCur].page = 1
								// 				that.listObj[that.TabCur].loading = false
								// 				that.getList(that.TabCur)
												
								// 				setTimeout(function(){
								// 					uni.navigateTo({
								// 						url:'/pages/member/wallet/pay?id='+order_id
								// 					})
								// 				}, 750)
								// 				return false
												
								// 			})
								// 		} else {
								// 			that.listObj[that.TabCur].list = []
								// 			that.listObj[that.TabCur].hasMore = true
								// 			that.listObj[that.TabCur].page = 1
								// 			that.listObj[that.TabCur].loading = false
								// 			that.getList(that.TabCur)
								// 		}
										
								// 	})
								// 	.catch((response) => {
								// 		console.log(response)
								// 		uni.hideLoading()
								// 	})
							} else {
								if (response.data.data.address_id == 0) {
									if (response.data.data.status == 400) {
										this.$common.showError("已领取过奖励")
										return
									} else {
										// this.$common.showError("请先添加收货地址")
										// setTimeout(function(){
										// 	uni.navigateTo({
										// 		url:'/pages/member/address/list'
										// 	})
										// }, 750)
										
									}
								}
								uni.hideLoading()
							}
							
							
						})
						.catch((response) => {
							console.log(response)
							uni.hideLoading()
						})
					
				} else {
					this.$common.showError("奖品参数错误")
					return
				}
			},
			getList(index) {
				let obj = this.listObj[index]
				if (!obj.hasMore || obj.loading) return

				this.listObj[index].loading = true
				
				if(index>0){ //参与记录
					let params = {
						page: obj.page,
						type:1
					}
					this.$http
						.get('points_record_list', params)
						.then((response) => {
							console.log(response)
							let list = obj.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.listObj[index].hasMore = false
							}
							this.listObj[index].list = list
							this.listObj[index].loading = false
							this.listObj[index].page++
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}else{ //获奖记录
					let params = {
						page: obj.page,
						type:2
					}
					this.$http
						.get('points_record_list', params)
						.then((response) => {
							console.log(response)
							let list = obj.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.listObj[index].hasMore = false
							}
							this.listObj[index].list = list
							this.listObj[index].loading = false
							this.listObj[index].page++
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
		},
		onPullDownRefresh() {
			this.listObj[this.TabCur].list = []
			this.listObj[this.TabCur].hasMore = true
			this.listObj[this.TabCur].page = 1
			this.listObj[this.TabCur].loading = false
			this.getList(this.TabCur)
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
	}
</script>

<style>
	.my-scroll-view{
		position: fixed;
		top: 45px;
		left: 0;
		border-bottom: 1rpx solid #EAEAEA;
	}
	.list-content{
		padding-top: 45px;
	}
	.reward-box{
		margin: 20rpx;
		padding: 30rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}
	.reward-box .goods{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods .thumb{
		margin-right: 20rpx;
		flex-shrink: 0;
		padding: 10rpx;
		width: 148rpx;
		height: 140rpx;
		background-color: #F2F2F2;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goods .thumb image{
		max-width: 138rpx;
		max-height: 130rpx;
	}
	.goods .info{
		flex: 1;
		/* height: 140rpx; */
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.info .title{
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		display: -webkit-box;    
		-webkit-box-orient: vertical;    
		-webkit-line-clamp: 2;    
		overflow: hidden;
		line-height: 40rpx;
	}
	.info .time{
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.reward-box .action-box{
		margin-top: 40rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.action-box text{
		width: 200rpx;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
		border: 1rpx solid #3282FF;
		border-radius: 27rpx;
		font-size: 28rpx;
	}
	.action-box text.goods-detail{
		margin-right: 24rpx;
		color: #3282FF;
		border: 1rpx solid #3282FF;
	}
	.action-box text.order-detail{
		color: #FFFFFF;
		background-color: #3282FF;
	}
</style>

<style>
	.join-box{
		padding: 0 20rpx;
		background-color: #FFFFFF;
	}
	.join-box .stand-line, .top-line{
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #E2E1E1;
	}
	.top-line text{
		flex: 33.33% 0 0;
		flex-shrink: 0;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}	
	.stand-line text{
		flex: 33.33% 0 0;
		flex-shrink: 0;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
	}
	.stand-line text.isreward{
		color: #FF1313;
	}
</style>